<div class="content-container">
  <div nz-row>
    <div nz-col nzXs="0" nzSm="2" nzMd="4" nzLg="6" nzXl="8"></div>
    <div nz-col nzXs="24" nzSm="20" nzMd="16" nzLg="12" nzXl="8">
      <form nz-form #f="ngForm">
        <nz-form-item>
          <nz-form-label nzSpan="4" nzRequired>旧密码</nz-form-label>
          <nz-form-control nzHasFeedback nzSpan="20" [nzErrorTip]="combineTpl1">
            <input
              required
              nz-input
              type="password"
              [(ngModel)]="editForm.oldPassword"
              name="oldPassword"
              placeholder="请输入旧密码"
            />
          </nz-form-control>
        </nz-form-item>
        <ng-template #combineTpl1 let-control>
          <ng-container *ngIf="control.hasError('required')">请输入旧密码</ng-container>
        </ng-template>
        <nz-form-item>
          <nz-form-label nzSpan="4" nzRequired>新密码</nz-form-label>
          <nz-form-control nzHasFeedback nzSpan="20" [nzErrorTip]="combineTpl2">
            <input
              required
              nz-input
              type="password"
              [(ngModel)]="editForm.newPassword"
              name="newPassword"
              placeholder="请输入新密码"
              appPasswordValidate
            />
          </nz-form-control>
        </nz-form-item>
        <ng-template #combineTpl2 let-control>
          <ng-container *ngIf="control.hasError('required')">请输入新密码</ng-container>
          <ng-container *ngIf="control.hasError('regError')">
            {{ control.errors.regError }}
          </ng-container>
        </ng-template>
        <nz-form-item>
          <nz-form-label nzSpan="4" nzRequired>确认密码</nz-form-label>
          <nz-form-control nzHasFeedback nzSpan="20" [nzErrorTip]="combineTpl3">
            <input
              required
              nz-input
              type="password"
              [(ngModel)]="editForm.comfirPassword"
              name="comfirPassword"
              placeholder="请输入确认密码"
              [appConfirmPwdValidate]="editForm.newPassword"
            />
          </nz-form-control>
        </nz-form-item>
        <ng-template #combineTpl3 let-control>
          <ng-container *ngIf="control.hasError('required')">请输入确认密码</ng-container>
          <ng-container *ngIf="control.hasError('difference')">
            {{ control.errors.difference }}
          </ng-container>
        </ng-template>
        <nz-form-item>
          <nz-form-label nzSpan="4" nzNoColon="true"></nz-form-label>
          <nz-form-control>
            <button nz-button nzType="primary" (click)="submit()" [disabled]="f.invalid">提交</button>
            <button nz-button (click)="f.reset()">重置</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>
    <div nz-col nzXs="0" nzSm="2" nzMd="4" nzLg="6" nzXl="8"></div>
  </div>
</div>
